<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-操作dom树二</title>


</head>
<body>
<ul id="ulid21">
    <li id="li11">西施</li>
    <li id="li12">王昭君</li>
    <li id="li13">貂蝉</li>
    <li id="li14">杨玉环</li>
</ul>

<input type="button" value="insert" onclick="insert1()"/>

<script type="text/javascript">
    //在<li>貂蝉</li>之前添加 <li>董小宛</li>
    function insert1() {
        /*
         1、获取到li13标签
         2、创建li
         3、创建文本
         4、把文本添加到li下面
         5、获取到ul
         6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
         */
        //获取li3 标签
        var li13 = document.getElementById("li13");
        //创建li
        var li15 = document.createElement("li");
        //创建文本
        var text15 = document.createTextNode("董小宛");
        //把文本添加到li下面 appendChild
        li15.appendChild(text15);
        //获取到ul
        var ul21 = document.getElementById("ulid21");
        //在<li>貂蝉</li>之前添加 <li>董小宛</li>
        //insertBefore(newNode,oldNode)
        ul21.insertBefore(li15,li13);

    }
</script>
</body>
</html>